<!--
 * @Description: 列表分页数据加载更多
 * @Author: JiangMing
 * @Date: 2021-09-1 17:22:00
 * @LastEditors: Pengfei Zhang
 * @LastEditTime: 2021-09-03 10:11:46
-->
<template>
  <scroll-view
    scroll-y="true"
    lower-threshold="50"
    class="scroll-list"
    @scrolltolower="scrolltolower"
    @scroll="scroll"
  >
    <slot></slot>
    <view class="data-empty">
      {{ list.length >= total ? '无更多数据' : '加载更多……' }}
    </view>
  </scroll-view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    // 下滑到底部时触发
    scrolltolower(e) {
      console.log('scrolltolower');
      this.$emit("scrolltolower", e);
    },
    // 滚动时触发
    scroll(e) {
      this.$emit("scroll", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll-list {
  height: 100%;
  overflow-y: scroll;
}
.data-empty {
  padding: 20rpx 0 32rpx;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}
</style>